import { Component } from 'react'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtIcon } from 'taro-ui'
import CustomNavBar from '../../components/CustomNavBar'
import image1 from '../../assets/images/9566868075f73bd7f1a2eede2f8bc893.jpg'
import image2 from '../../assets/images/1cc29317994ffd46618675af5eeb4ece.jpg'
import './index.scss'

export default class Detail extends Component {
  state = {
    currentId: '',
    // Mock 数据 - 每个作品有多张图片
    mockData: {
      '1': { images: [image1, image2, image1, image2], title: 'Retro literature and art', subtitle: '复古文艺' },
      '2': { images: [image2, image1, image2, image1], title: 'Classic Wedding', subtitle: '经典婚礼' },
      '3': { images: [image1, image2, image1], title: 'Vintage Style', subtitle: '复古风格' },
      '4': { images: [image2, image1, image2], title: 'Romantic Moments', subtitle: '浪漫时刻' },
      '5': { images: [image1, image2], title: 'Fresh & Natural', subtitle: '自然清新' },
      '6': { images: [image2, image1, image2, image1, image2], title: 'Creative Photography', subtitle: '创意摄影' },
      '7': { images: [image1, image2, image1], title: 'Beautiful Times', subtitle: '唯美时光' },
      '8': { images: [image2, image1], title: 'Art Workshop', subtitle: '艺术工坊' }
    }
  }

  componentDidMount() {
    // 获取路由参数中的ID
    const params = Taro.getCurrentInstance().router?.params || {}
    const id = params.id || '1'
    this.setState({ currentId: id })
    
    // 显示分享菜单
    Taro.showShareMenu({
      withShareTicket: true
    })
  }

  getCurrentData() {
    const { currentId, mockData } = this.state
    return mockData[currentId] || mockData['1']
  }

  // 分享给好友
  onShareAppMessage = () => {
    const data = this.getCurrentData()
    const { currentId } = this.state
    
    return {
      title: `${data.title} - ${data.subtitle}`,
      path: `/pages/detail/index?id=${currentId}`,
      imageUrl: data.images?.[0] || ''
    }
  }

  // 分享到朋友圈（如果支持）
  onShareTimeline = () => {
    const data = this.getCurrentData()
    const { currentId } = this.state
    
    return {
      title: `${data.title} - ${data.subtitle}`,
      query: `id=${currentId}`,
      imageUrl: data.images?.[0] || ''
    }
  }

  handleShare = () => {
    // 提示用户使用右上角分享按钮
    // 分享功能已通过 onShareAppMessage 和 onShareTimeline 实现
    Taro.showToast({
      title: '请点击右上角分享按钮',
      icon: 'none',
      duration: 2000
    })
  }

  handleCollect = () => {
    Taro.showToast({
      title: '收藏成功',
      icon: 'success'
    })
  }

  render() {
    const data = this.getCurrentData()

    return (
      <View className='detail-container'>
        <CustomNavBar title='作品详情' showBack={true} />
        
        <View className='detail-content'>
          <ScrollView 
            className='detail-scroll'
            scrollY
            scrollWithAnimation
          >
            {/* 图片列表 */}
            <View className='detail-images'>
              {data.images?.map((img, index) => (
                <Image 
                  key={index}
                  src={img} 
                  mode='widthFix'
                  className='detail-image-item'
                />
              ))}
            </View>

            {/* 底部留白，避免内容被底部操作栏遮挡 */}
            <View className='detail-bottom-spacer' />
          </ScrollView>
        </View>

        {/* 底部操作栏 */}
        <View className='detail-actions'>
          <View className='action-item' onClick={this.handleShare}>
            <AtIcon value='share' size='18' color='#111' />
            <Text className='action-text'>分享</Text>
          </View>
          {/* <View className='action-divider' /> */}
          <View className='action-item' onClick={this.handleCollect}>
            <AtIcon value='star' size='18' color='#111' />
            <Text className='action-text'>收藏</Text>
          </View>
        </View>
      </View>
    )
  }
}

